<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" class="m-all">
<head th:replace="common :: head('首页-前台')">
</head>
<body style=" overflow-y: hidden" class="m-all" >
<div id="app" class="m-all">
    <el-container style="height: 100%; border: 1px solid #eee">
        <el-header th:replace="common :: navMenuX">

        </el-header>
        <el-main style="">
            <el-row :gutter="10">
                <el-row :gutter="10">
                    <el-col :xs="8" :sm="6" :md="5">
                        <div class="grid-content bg-purple">
                            <el-card class="box-card" shadow="hover">
                                <div slot="header" class="clearfix">
                                    <i class="el-icon-news color-cheng"></i>
                                    <span>公告</span>
                                </div>
                                <ul class="infinite-list">
                                    <li class="item" v-for="o in clists" :key="o.title">
                                        <a class="link" :href="o.href" :title="o.title">{{o.title}}</a>
                                        <i class="el-icon-s-promotion" style="float: right; color: #939393;"></i>
                                    </li>

                                </ul>
                            </el-card>
                        </div>
                        <div class="grid-content bg-purple">
                            <el-card class="box-card" shadow="hover">
                                <div slot="header" class="clearfix">
                                    <i class="el-icon-news color-cheng"></i>
                                    <span>分类</span>
                                </div>
                                <ul class="infinite-list">
                                    <li class="item" v-for="o in clists" :key="o.title">
                                        <a class="link" :href="o.href" :title="o.title">{{o.title}}</a>
                                        <i class="el-icon-s-promotion" style="float: right; color: #939393;"></i>
                                    </li>

                                </ul>
                            </el-card>
                        </div>
                    </el-col>
                    <el-col :xs="8" :sm="12" :md="14">
                        <div class="grid-content bg-purple-light">
                            <template>
                                <el-carousel :interval="4000"  @change="changeImg" style="width: 100%;margin-top: 1px;" trigger="click">
                                    <el-carousel-item v-for="item in items" :key="item.title">

                                        <el-image
                                                :class="className"
                                                style="width: 100%; height: 100%; cursor: pointer;"
                                                :src="item.url"
                                                @click="goto(item.detail)"
                                                fit="cover"></el-image>
                                    </el-carousel-item>
                                </el-carousel>
                            </template>
                            <div class="infinite-list-wrapper" style="overflow:auto">
                                <ul
                                        class="infinite-list"
                                        v-infinite-scroll="load"
                                        infinite-scroll-disabled="disabled">
                                    <li v-for="blog in blogs" class="infinite-list-item">
                                        <div @click="goto('/f/blog/'+blog.id)" style="cursor: pointer">
                                            <el-card :body-style="{ padding: '0px'}" shadow="hover">
                                                <img :src="blog.firstPicture" class="blog-image">
                                                <div style="padding: 14px;float: left;max-width: 500px;">
                                                    <span>{{blog.title}}</span>
                                                    <div class="bottom clearfix">
                                                        <time class="time">{{blog.description}}</time>
                                                    </div>
                                                    <span>{{blog.updateTime}}</span>

                                                </div>
                                            </el-card>
                                        </div>

                                     </li>
                                </ul>
                                <p v-if="loading">加载中...</p>
                                <p v-if="noMore">没有更多了</p>
                            </div>
                        </div>
                    </el-col>
                    <el-col :xs="8" :sm="6" :md="5">
                        <div class="grid-content bg-purple-light">
                            <aside class="joe_aside">
                                <section class="joe_aside__item author">
                                    <img width="100%" height="120" class="image lazyloaded" th:src="@{/img/author_bg.jpg}" alt="博主栏壁纸">
                                    <div class="user">
                                        <div class="avatar_wrapper circle">
                                            <img class="avatar lazyloaded" th:src="@{/img/default_avatar.jpg}" alt="博主头像">
                                        </div>
                                        <a class="link" href="http://xy94.top" target="_blank" rel="noopener noreferrer nofollow">
                                            admin<img class="level" th:src="@{/img/level_2.svg}" alt="博主等级">
                                        </a>
                                    </div>
                                    <div class="count">
                                        <div class="item" style="border-right: 1px solid #EBEEF5;cursor: pointer" @click="goto('/f/tags/-1')">
                                            <span class="num">7</span>
                                            <span>分类数</span>
                                        </div>
                                        <div class="item" style="border-right: 1px solid #EBEEF5;cursor: pointer" @click="goto('/f/type/-1')">
                                            <span class="num">25</span>
                                            <span>文章数</span>
                                        </div>
                                        <div class="item" style="cursor: pointer" @click="goto('/')">
                                            <span class="num">0</span>
                                            <span>评论数</span>
                                        </div>
                                    </div>
                                </section>
                            </aside>
                        </div>
                        <div class="grid-content bg-purple-light">
                            <el-card class="box-card" shadow="hover">
                                <div slot="header" class="clearfix">
                                    <i class="el-icon-news color-cheng"></i>
                                    <span>最新文章</span>
                                </div>
                                <ul class="infinite-list">
                                    <li class="item" v-for="o in clists" :key="o.title">
                                        <a class="link" :href="o.href" :title="o.title">{{o.title}}</a>
                                        <i class="el-icon-s-promotion" style="float: right; color: #939393;"></i>
                                    </li>

                                </ul>
                            </el-card>
                        </div>
                    </el-col>
                </el-row>
            </el-row>
        </el-main>

        <el-footer class="m-footer">
            <div class="m-item">
                <div>
                    2022 ©<a href="http://xy94.top/f/aboutme" target="_blank" rel="noopener noreferrer">z</a>
                    - <a class="icp" href="https://beian.miit.gov.cn" target="_blank" rel="noopener noreferrer nofollow">
                        <p style="color: #939393;display: inline;height:20px;line-height:20px;margin: 0px 0px 0px 5px; ">晋ICP备18011938号-1</p>
                    </a>
                </div>


                <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=14010802080274" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
                    <img th:src="@{/img/beian.png}" style="float:left;"/>
                    <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;font-size: 12px;">晋公网安备 14010802080274号</p>
                </a>


            </div>
        </el-footer>
    </el-container>
</div>
</body>
<style>
    .lun-img {
        transform: scale(1.5);//将图片放大
    }

    .lun-img-two {
        transition: all 3s;//恢复正常过渡的时间
    transform: scale(1);//将图片恢复正常
    }

    .medium{
        background-size: cover;
    }
    .bg-purple {
        background: #d3dce6;
        min-height: 100px;
        margin: 10px 0;
    }
    .bg-purple-light {
        background: #e5e9f2;
        min-height: 200px;
        margin: 10px 0;
    }
    .grid-content {
        border-radius: 4px;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
        cursor: pointer;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }
    .el-carousel__item.is-animating {
        transition: all 0.6s;
    }
   /* 轮播图
    我这里做了自适应，高度是rem 为单位的，你们可以直接换成你们的px 宽高即可，如果你们也用了rem，我的单位换算可以和你们的不一样，你们改成你们的数值即可。
      */
    .carousel-map {
          width: 100%;
          height: 43.5rem;
          overflow: hidden;

    }
    .carousel-map.lun-img {
        transform: scale(1.5);
    }
    .carousel-map.lun-img-two {
        transition: all 3s;
        transform: scale(1);
    }
    .carousel-map.el-carousel__item.is-animating {
        transition: all 0.6s;
    }
</style>

<script>

    new Vue({
        el: '#app',
        data() {
            return {
                className: "", //轮播图名字
                restaurants: [],
                state: '',
                timeout:  null,
                activeIndex: '1',
                count: 10,
                p: 1,
                s: 10,
                loading: false,
                blogs : [],
                items:[
                ],
                clists:[
                    {title:'a',href:'/f/blog/2'},
                    {title:'b',href:'/f/blog/2'},
                    {title:'c',href:'/f/blog/1'}
                ]
            }
        },
        computed: {
            noMore () {
                return this.count >= 20
            },
            disabled () {
                return this.loading || this.noMore
            }
        },
        methods: {
            load () {
                this.loading = true
                setTimeout(() => {
                    this.count += 2
                    this.loading = false
                }, 2000)
            },
            goto(h){
                window.open(h);
            },
            querySearchAsync(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(results);
                }, 3000 * Math.random());
            },
            createStateFilter(queryString) {
                return (state) => {
                    return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSelect(item) {
                console.log(item);
            },
            getData(){
                axios.get('/f/blog/listPageByMap', 'current=' + this.p + '&size=' + this.s ).then(res => {
                    const data = res.data;
                    if(data.code == '0'){
                        this.blogs = data.data;
                        this.total = data.count;
                    }
                })
            },
            initCarousel(){
                axios.get('/f/carousel/list', null).then(res => {
                    const data = res.data;
                    if(data.code == '0'){
                        this.items = data.data;
                    }
                })

            },
            //轮播图切换
            changeImg(e) {
                // console.log(e, "当前下标");
                this.className = "lun-img";
                setTimeout(() => {
                    this.className = "lun-img-two";
                }, 300);
            },
        },
        created () {
            this.getData();
            this.initCarousel();

        },
        mounted() {
            this.className = "lun-img";
            setTimeout(() => {
                this.className = "lun-img-two";
            }, 300);
            $(".infinite-list .item").click(function(){
                this.children[0].click();
            });
            $(".infinite-list .item").mouseover(function(){this.style.backgroundColor='aliceblue'});
            $(".infinite-list .item").mouseout(function(){this.style.backgroundColor=''});
        },
    })
</script>
</html>